<template>
  <div id="params">
    <div class="breadcrumb-wrap">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>维修师</el-breadcrumb-item>
        <el-breadcrumb-item>参数</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="gird-wrap">
      <div>
        <div style="padding: 10px 0; font-size: 14px;">
          品牌
          <el-button type="text" size="small" @click="dialogVisible.addBrandVisible = true">+新增</el-button>
        </div>
      </div>
      <div v-if="brands.length>0">
        <param-item-cell show="status" :datas="this.brands" labelField="brandName" valueField="No" @change="brandChange"
          @remove="removeBrand">
        </param-item-cell>
      </div>
      <div v-if="selectedBrand !== null">
        <div style="padding: 10px 0; font-size: 14px;">
          型号
          <el-button type="text" size="small" @click="dialogVisible.addModelVisible = true">+新增</el-button>
        </div>
      </div>
      <div v-if="selectedBrand !== null">
        <param-item-cell :datas="this.models" show="status" labelField="modelName" valueField="No" @change="modelChange"
          @remove="removeOneDevice"></param-item-cell>
      </div>

      <div v-if="selectedModel !== null">
        <div style="padding: 10px 0; font-size: 14px;">
          颜色
          <el-button type="text" size="small" @click="addColorName">+新增</el-button>
        </div>
      </div>
      <div v-if="colors.length > 0">
        <param-item-cell :datas="colors" show="status" labelField="colorName" valueField="No" @change="colorChange"
          @remove="removeOneColor"></param-item-cell>
      </div>
      <div v-if="selectedColor !== null">
        <div style="padding: 10px 0; font-size: 14px;">
          故障
          <el-button type="text" size="small" @click="showAddFlatDialog">+新增</el-button>
        </div>
      </div>
      <div v-if="falts.length > 0">
        <param-item-cell :datas="falts" show="status" labelField="mainTypeName" valueField="No" @change="faltChange"
          @remove="removeOneFalt"></param-item-cell>
      </div>

      <div v-if="selectedFalt !== null">
        <div style="padding: 10px 0; font-size: 14px;">
          故障详情
          <el-button type="text" size="small" @click="addFaltDetailList">+新增</el-button>
        </div>
      </div>
      <div v-if="faltDetail.length > 0">
        <param-item-cell titleField="subTypeName" :datas="faltDetail" show="status" labelField="subTypeShotName"
          faltPrice="price" valueField="No" @blur="editfalt" @remove="removeOneFaltDetail">
        </param-item-cell>
      </div>
      <el-dialog title="新增品牌" size="tiny" v-model="dialogVisible.addBrandVisible">
        <table>
          <tr>
            <td>名称：</td>
            <td>
              <el-input v-model="addVo.brandName"></el-input>
            </td>
          </tr>
        </table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible.addBrandVisible = false">取 消</el-button>
          <el-button type="primary" @click="addBrandRelMainType">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="新增型号" size="tiny" v-model="dialogVisible.addModelVisible">
        <table>
          <tr>
            <td>名称：</td>
            <td>
              <el-input v-model="addVo.modelName"></el-input>
            </td>
          </tr>
        </table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible.addModelVisible = false">取 消</el-button>
          <el-button type="primary" @click="addModel">确 定</el-button>
        </span>
      </el-dialog>

      <tag-selector :alternative="allObject.colors" :selected="colors" labelField="colorName" valueField="No"
        :action="addColor" @change="updateColorRelModel"></tag-selector>
      <el-dialog title="新增颜色" size="tiny" v-model="dialogVisible.addColorVisible">
        <table>
          <tr>
            <td>名称：</td>
            <td>
              <el-input v-model="addVo.colorName"></el-input>
            </td>
          </tr>
        </table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible.addColorVisible = false">取 消</el-button>
          <el-button type="primary" @click="addColorRelModel">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="新增故障" size="tiny" v-model="dialogVisible.addFaltVisible">
        <table>
          <tr>
            <td>名称：</td>
            <td>
              <el-input v-model="addVo.mainTypeName"></el-input>
            </td>
          </tr>
        </table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible.addFaltVisible = false">取 消</el-button>
          <el-button type="primary" @click="addFaltRelation">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="新增故障详情" size="tiny" v-model="dialogVisible.addFaltDetailVisible">
        <div style="padding: 10px 0;">
          故障：
          <span v-if="selectedFalt !== null">{{selectedFalt.mainTypeName}}</span>
        </div>
        <div style="padding: 10px 0;">
          故障详情简称：
          <el-input v-model="addVo.subTypeShotName"></el-input>
        </div>
        <div style="padding: 10px 0;">
          故障详情：
          <el-input v-model="addVo.subTypeName"></el-input>
        </div>
        <div>
          价格：
          <el-input v-model="addVo.faltDetailprice" type="number"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible.addFaltDetailVisible = false">取 消</el-button>
          <el-button type="primary" @click="addFaltDetail">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import r from "../utils/RequestUtil";
  import ParamItemCell from "../../components/ParamItemCell";
  import WyTag from "../../components/WyTag";
  import TagSelector from "../../components/TagSelector";
  import wxs from "../utils/WxsService";

  export default {
    name: "params",
    components: {
      ParamItemCell,
      WyTag,
      TagSelector
    },
    data: function () {
      return {
        dialogVisible: {
          addBrandVisible: false,
          addModelVisible: false,
          addColorVisible: false,
          addFaltVisible: false,
          addFaltDetailVisible: false,
          addSolutionVisible: false
        },
        addVo: {
          brandName: null,
          modelName: null,
          mainTypeName: null,
          colorName: null,
          faltName: null,
          faltDetailName: null,
          faltDetailNameAbb: null,
          solutionName: null,
          timeCost: null,
          price: null,
          id: null,
          solutionId: null,
          faltDetailprice: null
        },
        selectDataList: {
          colorNameList: [],
          mainTypeNameList: [],
          faltDetailList: [],
          solutionNameList: []
        },
        allObject: {
          brands: [],
          colors: [],
          falts: []
        },
        deviceTypes: [],
        selectedDevice: null,
        brands: [],
        selectedBrand: null,
        models: [],
        selectedModel: null,
        colors: [],
        selectedColor: null,
        falts: [],
        selectedFalt: null,
        faltDetail: [],
        selectedFaltDetail: null,
        faltDataProvider: [],
        selectedFaltDataProvider: [],
        solutions: [],
        selectedSolution: null,
        selectedContainer: {
          unselected: [],
          selected: []
        },
        disabledlist: {
          adddisabled: true,
          editdisabled: true
        }
      };
    },
    methods: {
      // },
      getBrand: function () { //获取品牌
        this.brands = wxs.getBrandInfo();

        this.selectedBrand = null;
        this.selectedModel = null;
        this.selectedColor = null;
        this.selectedFalt = null;
        this.models = [];
        this.colors = [];
        this.falts = [];
        this.faltDetail = [];
        this.selectedFaltDetail = null;
        this.solutions = [];
      },
      brandChange: function (item) { //根据品牌获取型号
        let arrNo = item.No;
        let list = wxs.getModelByBrandId([{
          No: arrNo
        }]);
        if (list.length > 0)
          this.models = list[0].children;

        this.selectedBrand = item;
        this.colors = [];
        this.falts = [];
        this.selectedModel = null;
        this.selectedColor = null;
        this.selectedFalt = null;
        this.faltDetail = [];
        this.selectedFaltDetail = null;
        this.solutions = [];
      },
      modelChange: function (item) { //根据手机型号获取颜色
        this.selectedModel = item;
        this.colors = [];
        this.falts = [];
        this.selectedColor = null;
        this.selectedFalt = null;
        this.faltDetail = [];
        this.selectedFaltDetail = null;
        this.solutions = [];
        this.colors = wxs.getModelColors([{
          MNo: this.selectedModel.No
        }]);
      },
      colorChange: function (item) { //根据颜色和机型获取故障
        this.selectedColor = item;
        this.selectedFaltDetail = null;
        this.falts = wxs.getMFlats();
      },
      addDeviceType: function () {},
      removeDevice(item) {},
      removeBrand(item) {
        //删除品牌
        this.$confirm(
          "此操作将删除与 “ " + item.brandName + " ” 相关的全部数据, 是否继续?",
          "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).then(() => {
          wxs.deleteBrandInfo([item.No]);
          setTimeout(() => {
            this.getBrand();
          }, 100);
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      },
      removeOneDevice(item) {
        //删除型号
        this.$confirm(
          "此操作将删除与 “ " + item.modelName + " ” 相关的全部数据, 是否继续?",
          "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).then(() => {
          wxs.deleteModelByNo(this.selectedBrand.No, item.No);
          this.brandChange(this.selectedBrand);
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      },
      //删除颜色
      removeOneColor(item) {
        this.$confirm(
          "此操作将删除与 “ " + item.colorName + " ” 相关的全部数据, 是否继续?",
          "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).then(() => {
          wxs.deleteMColorInfo([item.No]);
          this.modelChange(this.selectedModel)
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      },
      //删除故障
      removeOneFalt(item) {
        this.$confirm(
          "此操作将删除与 “ " +
          item.mainTypeName +
          " ” 相关的全部数据, 是否继续?",
          "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).then(() => {
          wxs.deleteFlate([item.No]);
          this.colorChange(this.selectedColor);
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      },
      //删除故障详情
      removeOneFaltDetail(item) {
        this.$confirm(
            "此操作将删除与 “ " + item.subTypeName + " ” 相关的全部数据, 是否继续?",
            "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
          ).then(() => {
            wxs.deleteFlateDetail([item.No]);
            this.faltChange(this.selectedFalt);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      //删除解决方案
      removeOneSolution(item) {},
      addBrand: function (brandName) {},
      addModel: function () {
        if (this.addVo.modelName === null || this.addVo.modelName === "" || this.addVo.modelName.length <= 0) {
          r.message("请输入型号名称", "warning");
          return;
        }
        let model = {};
        if (this.models.length < 1) {
          model = {
            No: this.selectedBrand.No,
            children: [{
              No: Date.now().toString(),
              status: "1",
              modelName: this.addVo.modelName,
            }]
          }
        } else {
          model = {
            MNo: this.selectedBrand.No,
            No: Date.now().toString(),
            status: "1",
            modelName: this.addVo.modelName,
          };
        }
        wxs.addModelInfo(model)
        this.brandChange(this.selectedBrand);
        this.dialogVisible.addModelVisible = false;
      },
      addColor: function (colorName) {
        if (colorName === null || colorName === "") {
          r.message("请输入颜色", "warning");
          return;
        }
      },
      showAddFlatDialog: function () {
        this.dialogVisible.addFaltVisible = true;
      },
      //点击新增颜色按钮
      addColorName() {
        this.dialogVisible.addColorVisible = true;
      },
      //点击故障详情新增按钮
      addFaltDetailList() {
        this.dialogVisible.addFaltDetailVisible = true;
      },
      addSolutionList() {
        this.dialogVisible.addSolutionVisible = true;
      },
      chooseFalt: function (item) {},
      removeFalt: function (item) {},
      addFalt: function (faltName) {},
      addFaltRelation: function () {
        if (this.addVo.mainTypeName === null || this.addVo.mainTypeName === "" || this.addVo.mainTypeName.trim()
          .length < 1) {
          r.message("请填写故障名称", "warning");
          return;
        }
        let model = {
          No: Date.now().toString(),
          mainTypeName: this.addVo.mainTypeName,
          status: "1"
        }
        wxs.addModelFlate(model);
        this.dialogVisible.addFaltVisible = false;
        this.colorChange(this.selectedModel);
      },
      editfalt(item) {},
      faltChange: function (item) {
        this.selectedFalt = item;
        this.faltDetail = wxs.getFlateDetail([{
          MNo: item.No
        }]);
      },
      addFaltDetail: function () {
        if (this.addVo.subTypeName == null || this.addVo.subTypeName == '') {
          return;
        } else if (this.addVo.subTypeShotName == null || this.addVo.subTypeShotName == '') {
          return;
        } else if (this.addVo.faltDetailprice == null || this.addVo.faltDetailprice == '') {
          return;
        }
        let model = {
          subTypeName: this.addVo.subTypeName,
          subTypeShotName: this.addVo.subTypeShotName,
          No: Date.now().toString(),
          MNo: this.selectedFalt.No,
          price: this.addVo.faltDetailprice,
          status: '1'
        }
        wxs.addFlateDetail(model);
        this.dialogVisible.addFaltDetailVisible = false;
        this.faltChange(this.selectedFalt);
      },
      faltDetailChange: function (item) {
        this.selectedFaltDetail = item;
      },
      addSolution: function () {},
      editinfo() {},
      solutionChange: function (val) {},
      updateBrandRelMainType(unselected, selected) {},
      updateColorRelModel(unselected, selected) {},
      addBrandRelMainType() { //新增品牌
        if (this.addVo.brandName.trim().length <= 0) {
          return;
        }
        let brand = {
          brandName: this.addVo.brandName,
          No: Date.now().toString(),
          status: "1",
        }
        wxs.addBrandInfo(brand);
        this.getBrand();
        this.dialogVisible.addBrandVisible = false;
      },
      addColorRelModel() {
        let colorName = this.addVo.colorName;
        if (colorName == "" || colorName == null || colorName.trim().length < 1) {
          return;
        }
        let color = {
          colorName: this.addVo.colorName,
          MNo: this.selectedModel.No,
          No: Date.now().toString(),
          status: '1'
        }
        wxs.addMColorInfo(color);
        this.dialogVisible.addColorVisible = false;
        this.modelChange(this.selectedModel);
      }
    },
    mounted: function () {
      this.getBrand();
    }
  };

</script>

<style scoped="scoped">
  .item-cell {
    width: 100px;
    height: 60px;
    border: 1px solid #1d8ce0;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
    line-height: 60px;
    font-size: 14px;
    -moz-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
  }

</style>
